/* 清楚元素的内外边距 */
body,div,p,a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 整个页面的颜色 */
body {
    background-color: #010101;
    /* 给页面设置拉小不能在拖动视频不会跑走 */
    /* width: 1200px; */
}
/* 清楚超链接的下划线 */
a {
    text-decoration: none;
}
.daohanlan {
    /* 页面往下移动不让盒子滚动  固定定位 */
    position: fixed;
    /* 定位的盒子有叠加层级的,可以设置z-index ;提高层级 */
    /* 后面的数值只能是整数,数字越大,层级越高,并且不带单位 */
    /* 只有定位盒子(相对定位,固定定位,绝对定位)才有z-index: ;这个属性 */
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background-color: #010101;
}
.xiaohezi {
    width: 1200px;
    height: 48px;
    /* 给子盒子在父级盒子中居中对齐 */
    margin: auto;
}
.xiaohezi img {
    /* 内边距位置调整 */
    margin-top: 10px;
    /* 左浮动 */
    float: left;
}
.wenzi a {
    height: 48px;
    /* 设置文字行高等于盒子本身的高度,单行的文字会垂直居中 */
    line-height: 48px;
    /* 给又浮动的文字设置内边距的距离间隙 */
    margin-left: 30px;
    float: right;
    color: #a4a4a4;
}
/* .section {
    font-size: 100px;
    color: pink;
} */
.section1 {
    background-image: url(../imge/section1.jpg);
    background-position: center;
}
.title-box {
    position: absolute;
    width: 100%;
    top: 150px;
}
.title-box p {
    font-size: 60px;
    text-align: center;
    color:floralwhite;
    margin-bottom: 30px;
    letter-spacing: 2px;
}
.title-box a {
    display: block;
    height: 60px;
    width: 300px;
    background-image: url(../imge/links.png);
    margin: auto;
}
.title-box a:hover {
    background-position: -300px;
}
.ball1 {
    position: absolute;
    width: 13%;
    top: 22.7%;
    left: 20%;
    /* animation 动画名称 持续时间 运动曲线 播放次数 是否反方向 */
    animation: ball1 5s linear infinite alternate;
}
.ball2 {
    position: absolute;
    width: 22.3%;
    top: 49.8%;
    left: 68.56%;
    animation: ball1 3s linear infinite alternate;
}
.weixing {
    position: absolute;
    width: 7.2%;
    left: 66.96%;
    top: 40.18%;
    animation: weixing 15s linear infinite alternate;
}
/* 创建动画移动 自己定义名称ball1 */
@keyframes ball1 {
    from {
        margin-top: 0;
        /* background-color: red; */
    }
    to {
        margin-top: -25px;
        /* background-color: yellow; */
    }
}
@keyframes weixing {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }

}
    /* 动画名称自定义，但是必须和创建动画的名称一致。
持续时间必须跟单位是秒 s，不要忘记加单位。
运动曲线是 匀速 linear 
播放次数  infinite 是无限循环
是否反方向  。  alternate  跑马灯， 来回撞墙的意思….  */
/* 给网页视频设置拉动缩小缩大 跟随着拉动调整 */
.section video {
    width: 100%;
    height: 100%;
}
.word-content {
    position: absolute;
    /* 让一个绝对定位的盒子垂直居中 给top50%走父盒子高度的一半 */
    top: 50%;
    left: 18%;
    /* background-color: pink; */
    /* 往上走自己盒子高度一半 */
    transform: translateY(-50%);
}
.section {
    color: #fff;
}
/* 头部p标签元素 */
.bigger {
     font-size: 60px;
}
/* 中部p标签元素 */
.mid {
    font-size: 36px;
}
底部p标签元素
.small {
    font-size: 16px;
    margin-top: 12px;
}
.line {
    width: 28px;
    height: 3px;
    background-color: #5E5E5E;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* 盒子里面的超链接图片 */
.word-content a {
    display: block;
    width: 200px;
    height: 48px;
    margin-top: 50px;
    background-image: url(../imge/link2.png);
}
/* 给链接鼠标经过设置样式 */
.word-content a:hover{
    background-position: -200px 0;
}
/* a, p, div, ul, li, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */
.bootm {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 120px;
    text-align: center;
    background-color: #131416;
    /* 外边距 */
    padding-top: 38px;
    line-height: 22px;
    font-size: 12px;
}
.bootm img {
    /* 图片在文字居中对齐 */
    vertical-align: middle;
}